<script setup lang="ts">
  import { ref } from 'vue'
  const { windowWidth,windowHeight } = uni.getSystemInfoSync()
  const x = ref(windowWidth as number - uni.upx2px(80))
  const y = ref(windowHeight as number - uni.upx2px(300))
  const isFoucs = ref(false)
  const handleMovable = (e:any) => {
    // if(e.detail.x >= (windowWidth as number) / 2){
    //   x.value = (windowWidth as number - uni.upx2px(80))
    //   y.value = e.detail.y
    // }else{
    //   x.value = 0
    //   y.value = e.detail.y
    // }
  }
  const navigatorClick = (url:string) => {
    // #ifndef H5
    uni.openCustomerServiceChat({
      extInfo:{url:'https://work.weixin.qq.com/kfid/kfc0d02ef22ca7ec8d6'},
      corpId:'ww2166f77b0b2bd5b3'
    })
    // #endif
    // #ifdef H5
    const a = document.createElement('a')
    a.href = 'https://work.weixin.qq.com/kfid/kfc0d02ef22ca7ec8d6'
    a.click()

    // #endif

    // if(!isFoucs.value){
    //   uni.navigateTo({url})
    // }else{
    //   isFoucs.value = true
    // }
  }
</script>

<template>
<!--  <movable-area class="movable-area">-->
<!--    <movable-view @click="navigatorClick('/pages/contactUs/contactUs')" class="movable-view" @change="handleMovable" :x="x" :y="y" direction="all">-->
<!--      <up-icon name="server-man" color="#ffffff" size="30"></up-icon>-->
<!--    </movable-view>-->
<!--  </movable-area>-->
  <view class="movable-area">
    <view class="movable-body" @click.stop="navigatorClick('/pages/contactUs/contactUs')">
      <view class="movable-view">
       <image :src="`${$Prefix}/public/images/smallImage/contact.png`"/>
      </view>
<!--      <view class="movable-text" v-if="isFoucs">联系<br/>我们</view>-->
    </view>
  </view>
</template>

<style scoped lang="scss">
.movable-area{
  height: 100vh;
  width: 100%;
  top: 0;
  position: fixed;
  pointer-events: none;
  z-index: 20;
  //.movable-view{
  //  width: 80rpx;
  //  height: 80rpx;
  //  display: flex;
  //  justify-content: center;
  //  align-items: center;
  //  background: #84BC75;
  //  box-shadow: 0 0 10px #727272;
  //  border-radius: 100rpx;
  //  pointer-events: auto;
  //}
  .movable-body{
    padding: 10rpx 5rpx 10rpx 10rpx;
    border-radius: 100rpx 0 0 100rpx;
    background-color: #92C75B;
    box-shadow: 0px 3px 14px 2px rgba(146, 199, 91, 0.05),0px 8px 10px 1px rgba(146, 199, 91, 0.06),0px 5px 5px -3px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
    position: absolute;
    bottom: 200rpx;
    right: 0;
    .movable-view{
      width: 60rpx;
      height: 60rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #84BC75;
      box-shadow: 0 0 10px #47cb20;
      border-radius: 100rpx;
      image{
        width: 100%;
        height: 100%;
      }
    }
    .movable-text{
      width: calc(100% - 60rpx);
      font-size: 24rpx;
      margin-left: 10rpx;
      color: #FFFFFF;
    }
  }
}
</style>
